<template>
  <div class="left-chart">
    <dv-border-box-13 class="left-container">
      <div class="lc-header">
        多工站每小时数据情况
      </div>
      <dv-charts class="leftcharts" :option="option" />
    </dv-border-box-13>
  </div>
</template>

<script>
import { hourlyCapacity } from "@/network/home";
let option = {
  legend: {
    data: [
      // { name: "工站1", color: "#00baff" },
      // { name: "工站2", color: "#ff5ca9" },
      // { name: "工站3", color: "#f5d94e" },
    ],
    bottom: 10,
    textStyle: {
      fill: "#fff",
    },
  },
  xAxis: {
    data:[],
    // data: ["8:00","9:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00", "21:00"],
    axisLine: {
      //坐标轴 轴线相关设置。
      style: {
        stroke: "#999", //Stroke属性定义一条线，文本或元素轮廓颜色(可以理解为border)
      },
    },
    axisLabel: {
      //坐标轴 刻度标签的相关设置。
      style: {
        fill: "#999", //形状轮廓内的填充
        fontSize: "16px",
      },
    },
    axisTick: {
      //坐标轴 刻度相关设置。
      show: true,
    },
  },
  yAxis: {
    name: "数量",
    data: "value",
    splitLine: {
      //坐标轴在 grid 区域中的分隔线。
      show: true,
      style: {
        lineDash: [3, 3],
      },
    },
    axisLine: {
      style: {
        stroke: "#999",
      },
    },
    axisLabel: {
      style: {
        fill: "#999",
        fontSize: "16px"
      },
    },
    axisTick: {
      //坐标轴 刻度相关设置。
      show: true,
    },
    min: 0,
    // max: 3000,
    // interval: 500,
  },
  series: [
    // {
    //   name: "工站1",
    //   data:[],
    //   // data: [ 1600,1800, 1800,2100, 1700, 2000,1800,1800,1800, 1800, 1800,1800,1800, 2500,],
    //   type: "bar",
    //   barStyle: {
    //     fill: "rgb(0,186,255)",
    //     stroke: "rgb(0,186,255)",
    //   },
    //   label: {
    //     show: true,
    //   },
    // }  
  ]
}
export default {
  name: "LeftChart",
  data() {
    return {
      timer:null,
      option: {}
    }
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    console.log("beforeDestroy");
    this.option = {};
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timer);
    console.log("destroyed");
    this.option = {};
  },
  mounted() {
    this.getHourlyCapacity();
    this.getlist()
  },
  methods: {
    getlist(){
      let num = 0;
      //创建并执行定时器
      this.timer = setInterval(() => {
        this.getHourlyCapacity();
        //当num等于100时清除option 
        if (num % 10 == 0) {
          this.option = {};
        }
        num++;
      }, 10000);
    },
    getHourlyCapacity() {
      hourlyCapacity().then((res) => {
        console.log('2222',res);
        let data = res.data.data || [];
        if(data.length < 1) return;
        let leng = data[0].list.length - 1, flag = false, time = [], name = [], send = {}, dateTime = [], ser = [];
        data.forEach(item => {
          time.push(item.time);
          item.list.forEach((itea, index) => {
            if (!flag && index < leng + 1) {
              if (index == leng) flag = true;
              name.push({ name: itea.stationName})
            }            
            if (!send["_" + itea.id]) {
              send["_" + itea.id] = {stationName:itea.stationName};
              send["_" + itea.id]["standardOutput"] = [itea.standardOutput]
            } else {
              send["_" + itea.id]["standardOutput"].push(itea.standardOutput)
            }
          })
        })
        time.forEach((item) => dateTime.push((item.split(" ")[1]+":00")))
        for (let i in send) {
          ser.push({
            name: send[i].stationName,
            data: (() => {
              let f = [];
              send[i].standardOutput.forEach(item => {
                f.push(Number(item));
              });
              return f;
            })(),
            type: "bar",
            label: {
              show: true,           
            }
            // barStyle: {
            //   fill: colors[_index - 1],
            //   // stroke: "rgb(0,186,255)",
            // },
          })        
        }
        option.legend.data = name;
        option.xAxis.data = dateTime;
        option.series = ser;
        this.option = option;
      })
    }  
  }
}
</script>

<style lang="less">
.left-chart {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .left-container {
    // width: 50%;

    .leftcharts {
      width: 100%;
      height: 88%;
    }

    .lc-header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      // padding-top: 20px;
      box-sizing: border-box;
      // text-align: center;
      font-size: 20px;
      color: #3bc5ec;
      font-weight: 700;
    }
  }
}
</style>
